<!--
 * @Author: GKN
 * @Date: 2023-07-24 14:08:42
 * @LastEditTime: 2024-01-15 16:28:35
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\components\card1.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="card shadow-3" :class="background">
    <div class="titleView" :style="border">
        <div class="icon">
            <slot name="img"></slot>
            <span>{{ title }}</span>
        </div>
        <div class="more" v-if="more" @click="moreClick()">更多<img src="@/assets/img/more.png" alt=""></div>
        <div v-if="!more">
            <slot name="right"></slot>
        </div>
    </div>
    <div class="main" :style="background?'':'background:#fff;'">
        <slot name="main"></slot>
        <slot name="main1"></slot>
    </div>
</div>
</template>

<script>
export default {
  components:{},
  props: {
        title: {
            type: String,
            default: ""
        },
        more:{
            type: blur,
            default: false
        },
        background:{
            type: String,
            default: ""
        },
        border:{
            type: String,
            default: ""
        }
    },
  data: function() {
    return {}
  },
  methods: {
    moreClick(){
        this.$emit('moreClick')
    }
  },
  created() {}
}
</script>

<style lang='less' scoped>
    .card{
        width: 100%;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        .main{
            padding:10px 20px;
            box-sizing: border-box;
            .m{
                height: 46px;
                width: 100%;
                overflow: hidden;
            }
        }
        .titleView{
            width: 100%;
            border-bottom:1px solid #EBEBEB;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding:18px 20px;
            box-sizing: border-box;
            .icon{
                display: flex;
                align-items: center;
                span{
                    font-size: 16px;
                    color: #333;
                    font-weight: bold;
                    margin-left: 5px;
                }
                img{
                    width: 30px;
                    height: 30px;
                    margin-right: 5px;
                }
            }
            .more{
                display: flex;
                align-items: center;
                cursor: pointer;
                span{
                    font-size: 16px;
                    color: #8d8d8d;
                    font-weight: bold;
                }
                img{
                    width: 7px;
                    height: 12px;
                    margin-left: 5px;
                }
            }
        }
    }
.pxviewbg{
  background: url('@/assets/img/ad-bg1.png');
  background-size:100% 100% ;
}
</style>
